<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子网划分工具</title>
    <link rel="shortcut icon"type="image/x-icon" href="../static/logo.jpg"media="screen" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <style>
        input {
            text-align: center;
        }

        hr {
            width: 90%;
            margin: 10px auto;
            height: 1px;
            background-image: linear-gradient(
                    to right,
                    rgba(255, 255, 255, 0),
                    #0fb7ff,
                    rgba(0, 0, 0, 0)
            );
        }
        img {
            border-radius: 8px;
        }
    </style>
</head>
<body>
<script>
    $(function () {
        $("#img1").focus(function () {
            layer.tips('QQ:250251332','#img1');
        })
        $("#btn1").click(function () {
            let ip1 = $("#ip1").val();
            let ip2 = $("#ip2").val();
            let ip3 = $("#ip3").val();
            let ip4 = $("#ip4").val();
            let ip9 = $("#ip9").val();
            if (ip1 == "" || ip2 == "" || ip3 == "" || ip4 == "" || ip9 == "") {
                layer.msg('你倒是输完啊铁子');
                return false;
            }
            $.ajax({
                type: "post",
                url: "/tool1",
                data: {
                    ip1: ip1,
                    ip2: ip2,
                    ip3: ip3,
                    ip4: ip4,
                    ip9: ip9
                },
                success: function (data) {
                    $("#tx1").val(data);
                }
            })
        })
    })
</script>

<table class="layui-table" border="2" BORDERCOLOR="#deb887" style="text-align: center;" ;>
    <tr>
        <td>IP地址:</td>
        <td><input id="ip1" class="layui-input" type="text" maxlength="3"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '');"></td>
        <td><input id="ip2" class="layui-input" type="text" maxlength="3"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '');"></td>
        <td><input id="ip3" class="layui-input" type="text" maxlength="3"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '');"></td>
        <td><input id="ip4" class="layui-input" type="text" maxlength="3"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '');"></td>
        <td><input id="ip9" class="layui-input" type="text" maxlength="2" placeholder="子网掩码位数"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '');"></td>
    </tr>
</table>
<!--<table class="layui-table" border="2" BORDERCOLOR="#deb887" style="text-align: center;" ;>-->
<!--    <div align="center">-->
<!--        <button type="button" id="btn2" class="layui-btn">验证</button>-->
<!--    </div>-->
<!--    <tr>-->
<!--        <td>子网掩码:</td>-->
<!--        <td><input id="ip5" class="layui-input" type="text" maxlength="3" disabled="disabled"></td>-->
<!--        <td><input id="ip6" class="layui-input" type="text" maxlength="3" disabled="disabled"></td>-->
<!--        <td><input id="ip7" class="layui-input" type="text" maxlength="3" disabled="disabled"></td>-->
<!--        <td><input id="ip8" class="layui-input" type="text" maxlength="3" disabled="disabled"></td>-->
<!--    </tr>-->
<!--</table>-->
<div align="center">
    <button type="button" id="btn1" class="layui-btn">计算</button>
</div>
<hr>
</br>
<div class="layui-form-item" align="center">
            <textarea style="text-align: center;  resize: none;height: 200px;width: 60%" name="" id="tx1"
                      disabled="disabled"
                      placeholder="" class="layui-textarea"></textarea>
</div>
<hr>
<p align="center">Design By 莫</p>
<br>
<div align="center">
    <img id="img1" src="../static/logo.jpg" align="center" width="4%" height="4%"  >
</div>

</body>
</html>